﻿<%@ Page Title="" Language="C#" MasterPageFile="~/html/MyBlog.Master" AutoEventWireup="true" CodeBehind="TimeLine.aspx.cs" Inherits="HelloLLLLL.Blog.html.TimeLine" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>始与终</title>
     <!-- 本页特有css -->
    <link rel="stylesheet" href="../res/css/timeline.css">
    <!-- 本页特有js -->
    <script src="../res/js/modernizr.js"></script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
      <!-- 页面主体内容 -->
        <div class="layui-container">
            <blockquote class="layui-elem-quote sitemap shadow">
                <i class="layui-icon">&#xe715;</i>
                <span class="layui-breadcrumb" lay-separator=">">
                    <a href="/html/Index.aspx">首页</a>
                    <a><cite>始与终</cite></a>
                </span>
            </blockquote>
            <div class="blog-nav-two shadow">
                <div class="layui-breadcrumb" lay-separator="|">
                    <a href="/html/TimeLine.aspx" class="selected"><span>滴答滴答</span></a>
                    <a href="/html/Record.aspx"><span>文章归档</span></a>
                    <%--<a href="note.html"><span>笔记标签</span></a>--%>
                </div>
            </div>
            <div class="blog-panel">
                <section id="cd-timeline" class="cd-container">
                    
                    <%
                        if (listTimes != null)
                        {
                            for (int i = 0; i < listTimes.Count; i += 3)
                            {%>
                     <div class="cd-timeline-block">
                        <div class="cd-timeline-img cd-picture">
                            <img src="../res/images/cd-icon-picture.svg" alt="Location">
                        </div>
                        <div class="cd-timeline-content">
                            <h2><%=listTimes[i].TimeTitle %></h2>
                            <p><%=listTimes[i].TimeContent %></p>
                            <%if (!string.IsNullOrWhiteSpace(listTimes[i].Link))
                                { %>
                            <a href="<%=listTimes[i].Link %>" class="cd-read-more">阅读更多</a>
                            <%}%>
                            <span class="cd-date"><%=listTimes[i].CTime %></span>
                        </div>
                    </div>

                    <%if (i + 1 < listTimes.Count)
                        { %>
                    <div class="cd-timeline-block">
                        <div class="cd-timeline-img cd-movie">
                            <img src="../res/images/cd-icon-movie.svg" alt="Location">
                        </div>
                        <div class="cd-timeline-content">
                            <h2><%=listTimes[i + 1].TimeTitle %></h2>
                            <p><%=listTimes[i + 1].TimeContent %></p>
                           <%if (!string.IsNullOrWhiteSpace(listTimes[i + 1].Link))
                               { %>
                            <a href="<%=listTimes[i + 1].Link %>" class="cd-read-more">阅读更多</a>
                            <%}%>
                            <span class="cd-date"><%=listTimes[i + 1].CTime %></span>
                        </div>
                    </div>
                    <%} %>
                    <%if (i + 2 < listTimes.Count)
                        { %>
                    <div class="cd-timeline-block">
                        <div class="cd-timeline-img cd-location">
                            <img src="../res/images/cd-icon-location.svg" alt="Location">
                        </div>
                        <div class="cd-timeline-content">
                            <h2><%=listTimes[i + 2].TimeTitle %></h2>
                            <p><%=listTimes[i + 2].TimeContent %></p>
                            <%if (!string.IsNullOrWhiteSpace(listTimes[i + 2].Link))
                                { %>
                            <a href="<%=listTimes[i + 2].Link %>" class="cd-read-more">阅读更多</a>
                            <%}%>
                            <span class="cd-date"><%=listTimes[i + 2].CTime %></span>
                        </div>
                    </div>
                    <%} %>
                    <%}
                        }%>
                </section>
            </div>
        </div>
    <script src="https://cdn.bootcss.com/scrollReveal.js/3.3.6/scrollreveal.js"></script>
    <script src="../res/js/site.js"></script>
    <!-- 本页特有js -->
    <script>
        layui.use('jquery', function () {
            var $ = layui.jquery;
            $(function () {
                var $timeline_block = $('.cd-timeline-block');
                $timeline_block.each(function () {
                    if ($(this).offset().top > $(window).scrollTop() + $(window).height() *
                        0.75) {
                        $(this).find('.cd-timeline-img, .cd-timeline-content').addClass(
                            'is-hidden');
                    }
                });
                //时光轴根据滚动条动画展示
                $(window).on('scroll', function () {
                    $timeline_block.each(function () {
                        if ($(this).offset().top <= $(window).scrollTop() + $(window)
                            .height() * 0.75 && $(this).find('.cd-timeline-img')
                            .hasClass('is-hidden')) {
                            $(this).find('.cd-timeline-img, .cd-timeline-content')
                                .removeClass('is-hidden').addClass('bounce-in');
                        }
                    });
                });
            });
        });
    </script>
</asp:Content>
